<template>
  <div class="export_excel">
    <div class="export_excel_T">
      <el-button style="margin-left: 15px" type="primary" @click="handleExport">导出excel</el-button>
    </div>
    <div class="export_excel_C">
      <el-table
        :data="tableData"
        border
        highlight-current-row
        style="width: 100%"
        ref="table"
        current-row-key="id"
        row-key="id"
        key="id"
        column-key="id"
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
      >
        <el-table-column prop="id" label="id" width="50"></el-table-column>
        <el-table-column prop="date" label="日期" show-overflow-tooltip></el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="img" label="图片" width="100">
          <template #default="scope">
            <div style=" display: flex; align-items: center; justify-content: center;">
              <el-image :src="scope.row.img" style="max-width: 80px; max-height: 80px; border-radius: 5px" />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="province" label="省份"></el-table-column>
        <el-table-column prop="city" label="市区"></el-table-column>
        <el-table-column prop="address" label="地址" width="300"></el-table-column>
        <el-table-column prop="zip" label="邮编" width="120"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted } from 'vue';

import * as XLSX from 'xlsx'
export default {
  setup() {
    const data = reactive({
      tableData: [],
      downloadLoading: false,
      selectionLength: 0
    })
    onMounted(() => {
      data.tableData = reqData()
    })

    function handleExport() {

      const nameEnum = {
        id: 'ID',
        date: '日期',
        name: '名字',
        province: '省区',
        city: '市区',
        address: '地址',
        zip: '邮编',
        img: '图片',
      }

      const sheet1Data = data.tableData.map(v => {
        let newV = {}
        for (const key in v) newV[nameEnum[key]] = v[key]
        return newV
      })

      const sheet2Data = [
        Object.values(nameEnum),
        ...data.tableData.map(v => {
          let newV = []
          for (const key in v) newV.push(v[key])
          return newV
        })
      ]

      // 创建一个book对象
      const wb = XLSX.utils.book_new();
      // 将学生数组对象转为sheet表
      const sheet1 = XLSX.utils.json_to_sheet(sheet1Data);
      // aoa_to_sheet 是将数组转为sheet
      const sheet2 = XLSX.utils.aoa_to_sheet(sheet2Data);
      // 将sheet1 添加到book中
      XLSX.utils.book_append_sheet(wb, sheet1, "Sheet1");
      // 将sheet2 添加到book中
      XLSX.utils.book_append_sheet(wb, sheet2, "Sheet2");
      // 导出
      XLSX.writeFile(wb, `文件名称.xlsx`);
    }
    // 请求
    function reqData() {
      var value = [];
      for (let index = 1; index <= 20; index++) {
        value.push({
          id: index,
          date: Date.now(),
          name: "迪丽热巴",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 号",
          zip: 200333,
          img:
            index % 2 == 0
              ? "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2340175123,3483783040&fm=26&gp=0.jpg"
              : "http://pic1.win4000.com/pic/1/18/0d7870d6bf.jpg",
        });
      }
      return value;
    }
    return {
      ...toRefs(data),
      handleExport
    }
  },
};
</script>

<style lang="scss" scoped>
.export_excel {
  .export_excel_T {
    text-align: right;
    margin-bottom: 20px;
  }
}
</style>